@import "variables";

seed-teching-detail {

  .lesson-detail {
    header {
      padding: pxTorem(30);
      background-color: #fff;
      h2 {
        width: 100%;
        font-size: standard($f, f2);
        color: color($h5, c2);
      }
      .basic-info {
        margin-top: pxTorem(20);
        font-size: standard($f, f5);
        color: color($h5, c4);
      }
      time, .address {
        position: relative;
        padding-left: pxTorem(38);
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          margin-right: pxTorem(12);
        }
      }
      time {
        margin-bottom: pxTorem(16);
        &:before {
          @include icon(26, 26, '#{$icons-path}/training_time.png')
        }
      }
      .address {
        margin-top: pxTorem(16);
        address {
          width: 100%;
        }
        &:before {
          @include icon(26, 26, '#{$icons-path}/training_campus.png')
        }
      }
    }
    .content {
      margin-top: pxTorem(24);
      padding-top: pxTorem(32);
      background-color: #fff;
      .plan-list {
        padding-left: pxTorem(30);
        .plan-item {
          margin-top: pxTorem(32);
          padding-bottom: pxTorem(40);
          padding-right: pxTorem(30);
          &:before {
            left: pxTorem(16);
            right: 0;
          }
          .minute {
            display: flex;
            align-items: center;
            font-size: standard($f, f4);
            color: color($h5, c1);
            &:before {
              content: '·';
              margin-right: pxTorem(16);
            }
          }
        }
        .intro {
          padding-left: pxTorem(20);
          border-left: solid pxTorem(3) color($h5, c8);
          h4 {
            margin-top: pxTorem(18);
            margin-bottom: pxTorem(22);
            font-size: standard($f, f2);
            color: color($h5, c2);
          }
          p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            font-size: standard($f, f4);
            color: color($h5, c3);
          }
        }
        .image-box {
          margin: pxTorem(20) 0;
          overflow: hidden;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          p {
            width: 48%;
            margin-bottom: pxTorem(18);
          }
          img {
            width: pxTorem(286);
            height: pxTorem(154);
          }
        }
      }
    }
  }
}
